<template>
  <div id="app">
    <h2>原生获取</h2>
    <p>p元素</p>
    <h2>$refs获取DOM元素</h2>
    <!-- 1.给元素设置ref属性 -->
    <div ref="refEle">2022年世界互联网大会乌镇峰会在浙江乌镇举行</div>
    <h2>$refs获取组件</h2>
    <refs-com ref="refCom"></refs-com>
    <h2>$nextTick用法</h2>
    <nexttick-com></nexttick-com>
  </div>
</template>

<script>
import RefsCom from "./components/RefsCom.vue";
import NexttickCom from "./components/NexttickCom.vue";
export default {
  name: "App",
  components: { RefsCom, NexttickCom },
  // 挂载后
  mounted() {
    console.log(document.querySelector("p"));
    // 2.通过$refs获取
    console.log(this.$refs.refEle);
    console.log(this.$refs.refCom);
    // 可以获取子组件中的数据和方法
    console.log(this.$refs.refCom.comMsg);
    console.log(this.$refs.refCom.comFun);
    this.$refs.refCom.comFun();
  },
};
</script>

<style>
</style>
